<template>
<div class="administer">
        <div class="administerNav">
            <backHeader></backHeader>
        </div>
        <div class="administerCont">
        <div class="product html_pst">
            <!-- <el-form :inline="true" class="demo-form-inline series">
                    <el-form-item label="品牌名称">
                        <el-select v-model="request.brandId"  placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in lampBrandList" :key="item.id" :label="item.brandName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列名称">
                        <el-select v-model="request.nane1" placeholder="全部">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in seriesList" :key="item.id" label="系列" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="灯具类型">
                        <el-select v-model="request.region" placeholder="全部">
                            <el-option label="类型1" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search(1)">查询</el-button>
                    </el-form-item>
            </el-form> -->
            <div class="top">
            <el-button type="success" icon="el-icon-circle-plus-outline" width="500px"  @click="seriesbtn = true">新增系列信息</el-button>
             <el-dialog  title="新增系列信息" :visible.sync="seriesbtn"  custom-class="seriesTab addproduct pop-up" v-dialogDrag>
                 <el-form ref="form" :model="series_tab" label-width="86px">
                     <div class="wid100">
                         <div class="lt">
                             <el-form-item label="系列名称">
                                <el-input v-model="series_tab.name"></el-input>
                            </el-form-item>
                            <el-form-item label="灯具类型">
                                <el-select v-model="series_tab.type">
                                <el-option label="类型一" value=""></el-option>
                                <el-option label="类型二" value=""></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属品牌">
                                <el-input v-model="series_tab.name1"></el-input>
                            </el-form-item>
                         </div>
                         <div class="rt">
                             <el-form-item label="品牌LOGO" class="sce">
                                <template slot-scope="scope">
                                    <el-upload class="avatar-uploader" 
                                        action="" 
                                        :show-file-list="false" 
                                        :on-success="handleAvatarSuccess" 
                                        :before-upload="beforeAvatarUpload"
                                        @click="deleteRow(scope.$index, tableData)">
                                        <img v-if="imageUrl" :src="addimageUrl2" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </template>
                            </el-form-item>
                         </div>
                         
                     </div>
                      <el-form-item label="系列简介"  class="sce">
                            <el-input type="textarea" v-model="series_tab.desc"></el-input>
                        </el-form-item>
                 </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button>取 消</el-button>
                    <el-button type="primary">确 定</el-button>
                </span>
             </el-dialog>
      </div>
      <div class="roleControl">
            <div class="table_S">
             <el-table
                :data="tableData"
                border
                style="width: 100%"
                :max-height="tableHeight">
                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                <el-table-column prop="img" label="系列图标"></el-table-column>
                <el-table-column prop="permName" label="系列名称"></el-table-column>
                <el-table-column prop="English" label="灯具类型 "></el-table-column>
                <el-table-column prop="linkman" label=" 联系人"></el-table-column>
                <el-table-column prop="linkphone" label=" 联系电话"></el-table-column>
                <el-table-column prop="emai" label=" 电子邮箱"></el-table-column>
                <el-table-column prop="introduction" label=" 品牌简介" width="380" align="left"></el-table-column>
                <el-table-column prop="creationTime" label=" 创建时间"></el-table-column>
                <el-table-column prop="state" label=" 操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        class="editor"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        class="delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </div>
    </div>
     </div>
    </div>
</template>
<script>
import backHeader from '@/views/common/backHeader.vue'
export default {
    data() {
      return {
           tableHeight:200,
          lampBrandList:[],
          seriesList:[],
          lampTypeList:[],
          loading:false,
          request:{
              page:1,
              rows:20,
          },
          totalCount:0,
          tableData:[],
          addimageUrl2:'',
          seriesbtn:false,
          series_tab:{
              desc:'',
              name1:'',
              type:'',
              name:''
          },
        series: {
          name: '',
          name1:'',
          region:''
        }
      }
    },
    methods: {
      handleEdit(index, row) {
       
      },
      handleDelete(index, row) {
       
      },
       handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      search(page){
            this.loading = true
            let self = this
            this.request.page = page
            this.$http.postObj('/api/series/pageJson',this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
                self.loading = false
            })
      },
      initData(){
          this.search(1)
          let self = this
        this.$http.postQuery('/api/brands/json',{brandNameLike: ''},function(res){
            if(res.success){
                self.lampBrandList = res.data;
            }
        })
        this.$http.postObj('/api/series/json',{},function(res){
            if(res.success){
                self.seriesList = res.data;
            }
        })
        //加载灯具类型
        this.$http.get("/api/lampTypes/json", {}, function(res) {
            if (res.success) {
             self.lampTypeList = res.data;
            }
        });
      }
    },
    created(){
        this.initData()
    },
     components: {
          backHeader
     },
     mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 280;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 280
            }
        })
  }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
.seriesTab{
    .lt{
        width: 50%;
        float: left;
    }
    .rt{
        width: 50%;
        float: left;
        padding-left: 5%;
        .avatar-uploader-icon{
            height: 150px;
            line-height: 150px;
        }
    }
}
.series{
    .el-form-item{
        margin-right: 20px;
    }
    .el-button--primary{
        background-color: #5b65a1;
        border-radius: 4px;
        border: none;
    }
}
.product{
    .top{
        margin-bottom: 20px;
        button{
            background-color: #5b65a1;
            border-radius: 4px;
            border: none;
        }
    }
}
.table_S{
    .editor{
        background: none;
        border: none;
        padding: 0;
        color: #0070ed;
        font-size: 14px;
    }
     .delete{
        background: none;
        border: none;
        padding: 0;
        color: #d80000;
        font-size: 14px;
    }

}
     
</style>
